<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Collections" %>
<%@ page import="java.util.Comparator" %>
<%@ page import="org.gnomus.data.item" %>
<%@ page import="org.gnomus.data.lesson" %>
<%
  Context ctx = Context.get();
  lesson lsn = (lesson) ctx.data.get("lesson");
  if (lsn == null) {
%>
Lesson not found.
<%
  } else {
    List<item> items = lsn.getItems();
    if (items != null) {
      Collections.sort(items, new Comparator<item>() {
        public int compare(item i1, item i2) {
          Integer o1 = Integer.parseInt(i1.getOrder());
          Integer o2 = Integer.parseInt(i2.getOrder());
          return o1.compareTo(o2);
        }
      });
    }
%>
<script type="text/javascript">
  var lesson = { items : [] };
  $(document).ready(function() {
    lesson = new Lesson(<%= new Gson().toJson(lsn) %>);
<%
    if (items != null && items.size() > 0) {
%>
    lesson.show();
    $(document).keydown(function(event) {
      switch(event.which) {
        case 39 :
          lesson.showNextSlide(true);
          break;
        case 37 :
          lesson.showPreviousSlide();
          break;
      }
    });
<%
    } else {
%>
    alert("No items found.");
<%
    }
%>
  });
</script>
<div id="lesson">
  <div id="title_slide" class="slide current">
    <div class="t-row">
      <div class="lesson-title t-cell a-center a-middle">
        <%= lsn.get("title") %>
      </div>
    </div>
  </div>
<%
    for (int i = 0; i < items.size(); i++) {
      Map item = items.get(i);
      String type = (String) item.get("type");
%>
  <div id="item-<%= i %>" class="slide <%= i == 0 ? "future" : i == 1 ? "far-future" : "hidden" %>">
    <table style="width: 100%; height: 100%;">
      <tr>
        <td class="title a-top" style='height:48px;'>
          <%= item.get("title") %>
        </td>
      </tr>
      <tr>
        <td class="text a-top">
          <%= item.get("text") %>
        </td>
      </tr>
      <%
        if ("info".equals(type) && item.containsKey("graphics")) {
      %>
      <tr>
        <td class="graphics">
          graphics
        </td>
      </tr>
      <%
        } else if ("test".equals(type) && item.containsKey("task")) {
          String target = "#lesson #item-" + i + "";
      %>
      <tr>
        <td class="task">
          task
        </td>
      </tr>
      <%
        }
      %>
    </table>
  </div>
<%
    }
%>
  <div id="score_slide" style="display:none;">
    score
  </div>
  <div id="lesson_navigation">
    <div class="buttons">
      <table style="width:100%">
        <tr>
          <td>
            <a title="back" class="back" enabled="false" onclick="lesson.showPreviousSlide();">
              <img src="/images/back_gray.png">
            </a>
          </td>
          <td>
            <a title="zoom out" onclick="$('#lesson').css('zoom', Number($('#lesson').css('zoom')) - 0.05)">
              <img src="/images/zoom_out.png">
            </a>
          </td>
          <td>
            <a title="zoom in" onclick="$('#lesson').css('zoom', Number($('#lesson').css('zoom')) + 0.05)">
              <img src="/images/zoom_in.png">
            </a>
          </td>
          <%
            if (ctx.admin) {
          %>
          <td>
            <a onclick="window.location = window.location.href.replace('learn/lesson', 'admin/edit_lesson');" title="edit current item">
              <img src="/images/edit.png" alt="edit current item">
            </a>
          </td>
          <%
            }
          %>
          <td>
            <a title="next" class="next" enabled="true" onclick="lesson.showNextSlide();">
              <img src="/images/forward.png">
            </a>
          </td>
        </tr>
      </table>
    </div>
    <div class="p-absolute" style="right:8px;bottom:0;">
      <a title="return to lesson list" href="/learn">
        <img src="/images/reload.png" alt="return to lessons">
      </a>
    </div>
  </div>
</div>
<%
  }
%>